<!-- glance 店铺购物车单页模板 -->
<template name="glanceShopcart">
	<view class="glance-shop-cart">
		<!-- 空购物车背景 -->
		<view v-if="shownullcart" style="width: 100%;height: 250px;" >
			<view class="glance-shop-cart-nullcart"></view>
			<view style="height: 30px;width: 100%;font-size: 15px;line-height: 30px;text-align: center;">您的购物车为空，快去添加心爱的商品吧！</view>
		</view>
		
		<!-- 购物车商品 -->
		<view  style="background-clor: #F9F9F9; border-radius:20upx 20upx 16upx 16upx;margin: 26upx 23upx 212upx;">
			<block v-for="(item,i) in shoppingList" :key="i">
			<!--商品 -->
			<view  style="background-color: #FFFFFF;border-radius: 20upx 20upx 16upx 16upx;margin-bottom: 24upx;">

				<!-- <scroll-view style="width: 100%;white-space: nowrap;" scroll-x="true" :scroll-left='scrollTop' scroll-with-animation="true" @scroll="scroll"> -->
				     <scroll-view style="width: 100%;white-space: nowrap;" scroll-x= "true" :scroll-left='scrollposition' scroll-with-animation="true">
					<view class="glance-shop-cart-scrollx-items" style="display: inline-block;width: 100%;">
						<view class="glance-shop-cart-scrollx-items-item">
							<!-- 勾选 -->
							<view style="height: 100%;background-color: transparent;"  v-if="item.inven || item.inventory==0">
								<!-- 勾选 -->
								<view class="glance-shop-cart-scrollx-items-item-sel-go" :class="[ item.checked ? ' ':'glance-shop-cart-itemunselected-img glance-background-color']" ></view>
							</view>
							<!-- 勾选 -->
							<view style="height: 100%;background-color: transparent;" v-else>
								<!-- 勾选 -->
								<view class="glance-shop-cart-scrollx-items-item-sel-go" :class="[ item.checked ? 'glance-shop-cart-itemselected-img select-img':'glance-shop-cart-itemunselected-img']" @click="clickitemselected(item)"></view>
							</view>
							<!-- 图片 -->
							<view style="height: 146upx;text-align:center;">
								<image :src="item.listImage" mode="scaleToFill" style="height: 146upx;width: 146upx;border-radius:7upx;"></image>
							</view>
							<!-- 描述 -->
							<view class="glance-shop-cart-items-item-des">
								<!-- 名称 -->
								<view class="sigle-line-text" :class="[item.inventory==0 || item.inven?'sigle-line-text-inventory':'']" ><text>{{ item.title }}</text></view>
								<!-- 属性 -->
								<!-- <view class="sigle-line-text" style="font-size: 13px;;text-align: left;color: #ADADAD;" @click="clickitemhref(item.href)">{{ item.attributes }}</view> -->
								<!-- 价格 & 数量-->
								<view class="glance-shop-cart-items-item-pq">
									<view style="font-size: 24upx;font-family:PingFang SC;text-align: left;width: 50%;color:rgba(0,0,0,1);" v-if="item.inven || item.inventory==0"><text>已失效/库存不足</text></view>
									<view class="sigle-line-text"  style="font-size: 30upx;text-align: left;width: 50%;color:rgba(255,94,4,1);" v-else>￥{{item.travelEbusinessGoodsTemp.specSellingPrice||0}}</view>
									
									<!-- 数量操作 -->
									<view class="glance-shop-cart-items-item-opt">
										<!-- 减数量 -->
										<view class="glance-shop-cart-items-item-opt-quantity-minus" @click="minusitem(item)">-</view>
										<!-- 数量 -->
										<view class="glance-shop-cart-items-item-opt-quantity">{{ item.num}}</view>
										<!-- 加数量 -->
										<view class="glance-shop-cart-items-item-opt-quantity-plus" @click="plusitem(item)">+</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					
					<!-- 删除 -->
					<view class="glance-shop-cart-del" @click="clickdel(i,item)">
						<view class="glance-shop-cart-del-img"></view>
					</view>
			
				</scroll-view>
			</view>
			
			</block>
			
		</view>

	<!-- 金额合计 -->
	<view class="glance-shop-cart-order">
		<!-- 全选 -->
		<view>
			<!-- 勾选 -->
			<view class="glance-shop-cart-scrollx-items-item-sel" :class="[ isselectedall ? 'glance-shop-cart-itemselected-img width-height-img':'glance-shop-cart-itemunselected-img width-height']" @click="clickitemselectedall"></view>
		</view>
		<view class="quanxuan-heji">
			<!-- 总数量 -->
			<view class="glance-shop-cart-total-cnt"><text>全选</text></view>
			<!-- 总金额 -->
			<view class="glance-shop-cart-total-amt"><text>不含运费</text><text>合计:</text><text>￥{{ totalamount }}</text></view>
		</view>
		<!-- 立即下单 -->
		<view class="glance-shop-cart-create-order" @click="createorder"><text>结算</text><text>({{closenum}})</text></view>
	</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				// 全选 默认全选
				isselectedall: false,
				// scroll position
				scrollposition:0,
				//  scrollTop: 0,
				// old: {
				//   scrollTop: 0
				//             },
				// 实际项目中 购物车数据可从本地缓存中获取或从服务端获取
				cart:[],
				// 订单商品 购物车里已选择的商品生成订单
				ordercart:[],
				// 购买更多
				buymore:[],
				// 为您推荐的商品
				itemrecommend:[],
				// 合计金额
				totalamount:0,
				// 购物车商品数量 
				cntitems:0,
				// 显示空购物车背景
				shownullcart:false,
				shoppingList:[],
				length:'',
				shoppingCarList:[],
				contents:[],
				closenum:'0',
				//库存
				inven:false
			};
		},
		// onLoad:function() {
			
		// 	//获取购物车列表
		// 	this.getShoppingList();
		// },
		onShow:function(){
			this.totalamount=0
			this.closenum=0
			this.isselectedall=false
			//获取购物车列表
			this.getShoppingList();
			
		},
		onHide:function(){
			
			//离开购物车必须更新购物车列表内容
			this.updateShopping();
		},
		methods:{
			//更新购物车
			updateShopping:function(){
				this.shoppingCarList = []
				for(var i = 0;i < this.shoppingList.length; i++){
					this.shoppingCarList.push({
						num:this.shoppingList[i].travelEbusinessGoodsTemp.shoppingCarNum,
						goodsId:this.shoppingList[i].travelEbusinessGoodsTemp.goodsId})
				}
				let params = {
					memberId: this.pub.getUserInfo().memberId,
					// memberId: this.pub.getUserInfo().memberId || '4f0abd1af84d4168ba27ac00b63fcb2e',
					shoppingCarList:this.shoppingCarList
				}
				this.$postApi(this.$path.UPDATA_SHOPPING, params).then(res => {
					console.log("更新购物数据------------->", res.data)
					if(!res.data.success){
						this.pub.showError(res.data.error)
					}
				})
			},
			
			//获取购物车列表
			getShoppingList:function(){
				let params = {
					memberId: this.pub.getUserInfo().memberId,
					// memberId: this.pub.getUserInfo().memberId || '4f0abd1af84d4168ba27ac00b63fcb2e'
				}
				this.$postApi(this.$path.GET_SHOP_LIST, params).then(res => {
					console.log("购物车列表数据------------->", res.data)
					if (res.data.success) {
							let list = res.data.data.list
							list.forEach(item => {
								//控制是否被选中
								item.checked = false
								//控制库存
								item.inven = false
								//简化代码item.travelEbusinessGoodsTemp.shoppingCarNum
								if(!item.num){
									item.num = item.travelEbusinessGoodsTemp.shoppingCarNum
								}
								// item.positon = 0
							})
							this.shoppingList = list
							this.length=res.data.total
					}
				})
			},
			// 点击全选
			clickitemselectedall(){
				var shopping = []
				this.shoppingList.forEach(item => {
					if(item.isShelf == 0 || item.num > item.inventory){
						item.checked = false
					}else{
						item.checked = true
						shopping.push(item)
						console.log("shopping",shopping)
					}
				})
				if(shopping!=""){
					this.isselectedall = !this.isselectedall
				}
				this.totalamount = 0
				this.totalamount = parseFloat(this.totalamount)
				// 全选
				if (this.isselectedall){
					this.closenum=''
					shopping.forEach(item => {
						this.totalamount = this.totalamount + item.travelEbusinessGoodsTemp.specSellingPrice * item.num
						this.closenum = parseInt(this.closenum + '1' * item.num)
					})
				}else{
					// 全不选
						shopping.forEach(item => {
							this.closenum = parseInt(this.closenum - '1' * item.num)
							item.checked = false
						})
						if(this.closenum<0){
							this.closenum=0
						}
				}
			},
			// 点击勾选
			clickitemselected(item){
				// isShelf 0下架 1上架
				if(item.isShelf == 0){
					item.checked = item.checked
					this.pub.showError("商品已下架")
					return
				}
				//库存不足
				if(item.inventory==0||item.num>item.inventory){
					item.checked = false
					item.inven = true
					return
				}
				item.checked = !item.checked
				//选中增加金额
				if(item.checked){
					this.closenum = parseInt(this.closenum + '1' * item.num)
					this.totalamount = parseFloat(this.totalamount) + parseFloat(item.travelEbusinessGoodsTemp.specSellingPrice * item.num)
					this.totalamount = this.totalamount.toFixed(2)
					console.log("选中---------------",item.travelEbusinessGoodsTemp.specSellingPrice * item.num	)
				}
				//反选减去金额
				if(!item.checked){
					this.closenum = parseInt(this.closenum - '1' * item.num)
					this.totalamount = parseFloat(this.totalamount) - parseFloat(item.travelEbusinessGoodsTemp.specSellingPrice * item.num)
					this.totalamount = this.totalamount.toFixed(2)
				}
				for(var i = 0;i < this.shoppingList.length; i++){
					if(!this.shoppingList[i].checked){

						this.isselectedall = false
						break 
					}else{
						this.isselectedall = true
					}
					
				}
			},

			// scroll: function(e) {
			//             console.log(e)
			//             this.old.scrollTop = e.detail.scrollLeft
			//         },
			// goTop: function(e) {
			//             this.scrollTop = this.old.scrollTop
			//             this.$nextTick(function() {
			//                 this.scrollTop = 0
			//             });
			//             // uni.showToast({
			//             //     icon:"none",
			//             //     title:"纵向滚动 scrollTop 值已被修改为 0"
			//             // })
			//  },
			// 点击删除
			clickdel(i,item){
				// console.log('position-------->',item.positon)
				// item.positon = 0
				// 删除购物车商品时 更新合计金额
				if(item.checked){
					
					this.totalamount = parseFloat(this.totalamount) - parseFloat(item.travelEbusinessGoodsTemp.specSellingPrice * item.num);
					this.totalamount = this.totalamount.toFixed(2);
					this.closenum = parseInt(this.closenum - '1' * item.num);						
				}
				this.shoppingList.splice(i,1)
				// this.scrollposition = 0
				this.updateShopping()
				// this.goTop()
				if(!this.shoppingList.length){
					this.isselectedall = false
				}
				// this.getShoppingList()
			},
			// 减数量
			minusitem(item){
				
				if(item.num < 2){
					return
				}
				item.num--
				//更新购物车
				item.travelEbusinessGoodsTemp.shoppingCarNum=item.num
				if(item.checked){
					if(item.num==item.inventory){
						item.inven = false
					}
					this.totalamount = parseFloat(this.totalamount) - parseFloat(item.travelEbusinessGoodsTemp.specSellingPrice)
					this.totalamount = this.totalamount.toFixed(2)
					this.closenum = parseInt(this.closenum-1)
				}
				if(item.num==item.inventory){
					item.inven = false
				}
			},
			// 加数量
			plusitem(item){
				
				// isShelf 0下架 1上架
				if(item.num > item.inventory || item.isShelf == 0){
					return
				}
				item.num++
				//更新购物车
				item.travelEbusinessGoodsTemp.shoppingCarNum=item.num
				if(item.checked){
					this.totalamount = parseFloat(this.totalamount) + parseFloat(item.travelEbusinessGoodsTemp.specSellingPrice)
					this.totalamount = this.totalamount.toFixed(2)
					this.closenum = parseInt(this.closenum+1);
					if(item.num>item.inventory){
						this.totalamount = parseFloat(this.totalamount) - parseFloat(item.travelEbusinessGoodsTemp.specSellingPrice * item.num);
						this.totalamount = this.totalamount.toFixed(2);
						this.closenum = parseInt(this.closenum - '1' * item.num)
						item.checked = false
						this.isselectedall =false
					}
				}
				if(item.num>item.inventory){
					item.inven = true
				}
			},
			//结算
			createorder(){
				if(this.closenum==0){
					return
				}
				this.contents = []
					for(var i = 0;i < this.shoppingList.length; i++){
						if(this.shoppingList[i].checked){
							this.contents.push(this.shoppingList[i])
						}
					}
					console.log("结算选中的数据------",this.contents)
				
				uni.setStorage({
					key: 'totalamount',
					data: this.totalamount,
					success: function(res) {
						console.log('合计数据缓存success');
					}
				});
				uni.setStorage({
					key: 'contents',
					data: this.contents,
					success: function(res) {
						console.log('结算数据缓存success');
					}
				});
				uni.navigateTo({
					url: '/pages/shopping_new/shoppingconfirm',
					animationType: 'pop-in',
					animationDuration: 200
				});
			}
		}
	}
</script>

<style lang="scss">
	// 单行文本样式
		.sigle-line-text{width: 100%;overflow: hidden;
		text-overflow: ellipsis;text-align: left;font-size:30upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(51,51,51,1);
		white-space: normal ;
		overflow: hidden;
		
		text-overflow: ellipsis;
		
		display: -webkit-box;
		
		-webkit-line-clamp: 2;
		
		/*! autoprefixer: off */
		
		-webkit-box-orient: vertical;

}
	.sigle-line-text-inventory{
		color:rgba(128,128,128,1);
	}
	.last:last-child{
		margin-bottom: 134upx;
	}
	.glance-shop-cart{
		overflow: hidden;
		width: 100%;
		min-height: 100%;		
		background-color: #F9F9F9;
		margin-bottom: 110upx;
		// font-family: Arial, Helvetica, sans-serif;
	}
	// 滑动item 样式
	.glance-shop-cart-scrollx-items{
		width: 100%;height: 212upx;
		display: flex; display: -webkit-flex;flex-flow: row nowrap;align-items: flex-start;justify-content: space-between;
		// padding: 10px 0 10px 0;
		flex-direction: row;
		
		}

	// 滑动区域内item 样式
	.glance-shop-cart-scrollx-items-item{
		display: flex; display: -webkit-flex;flex-flow: row nowrap;align-items:center;justify-content: center;
		width: 100%;height: 100%;
		}
	.glance-shop-cart-scrollx-items-item-sel-go{
		position: relative; 
		top: 90upx;right: 19upx;
	}
	// item 勾选样式
	.glance-shop-cart-scrollx-items-item-sel{
		position: relative; 
		// left: 23upx;
		}
	.quanxuan-heji{
		display: flex;
		justify-content: space-between;
		width: 414upx;
	}
	// item 描述信息样式
	.glance-shop-cart-items-item-des{
		width: 60%;height: 146upx;
		display: flex;
		flex-direction: column;
		margin-left: 18upx;
		justify-content: space-between;
		}
	
	// 价格和数量样式
	.glance-shop-cart-items-item-pq{
		width: 436upx;
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		}
	
	// 数量操作
	.glance-shop-cart-items-item-opt{
		display: flex;display: -webkit-flex;flex-flow: row nowrap;align-items: center;justify-content: center;
		width: 180upx;height: 42upx; margin-right: 10px;text-align: center;
		color: #6C6C6C;line-height: 100%;
		&-quantity-minus,&-quantity,&-quantity-plus{
			display: flex;
			justify-content: center;
			align-items: center;
		}
		// 减数量
		&-quantity-minus{
			display: flex;
			justify-content: center;
			align-items: center;
			border-style: solid; border-width: 1px 0px 1px 1px; border-color: rgba(230,230,230,1);
			width: 50upx;height: 42upx;
			border-top-left-radius: 21upx;
			border-bottom-left-radius: 21upx;
			font-size:30upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(179,179,179,1);
			}
			// 数量
		&-quantity{
			height: 42upx;
			border-style: solid; border-width: 1px 1px 1px 1px; border-color:rgba(230,230,230,1);
			width: 79upx;
			font-size:30upx;
			font-family:PingFang SC;
			font-weight:500;
			color:rgba(51,51,51,1);
			}
			// 加数量
		&-quantity-plus{
			height: 42upx;
			border-style: solid; border-width: 1px 1px 1px 0; border-color: rgba(230,230,230,1);
			width: 50upx;
			font-size:30upx;
			font-family:PingFang SC;
			font-weight:400;
			color:rgba(179,179,179,1);
			border-top-right-radius: 21upx;
			border-bottom-right-radius: 21upx;
			}
		}
	
	// 底部汇总和订单样式
	.glance-shop-cart-order{
		width: 100%;height: 111upx;background-color: #ffffff;
		display: flex;
		display: -webkit-flex;
		flex-flow: row nowrap;
		align-items: center;
		justify-content: space-between;
		position: fixed;
		bottom: 0px;
		padding: 0 24upx;
		}
	// 合计金额样式
	.glance-shop-cart-total-cnt{
	font-size:30upx;
	font-family:PingFang SC;
	font-weight:400;
	color:rgba(128,128,128,1);
	}
	.glance-shop-cart-total-amt{
		display: flex;
		justify-content: center;
		flex-direction: row;
		align-items: center;
	}
	// 合计金额样式
	.glance-shop-cart-total-amt text:first-child{
		font-size:20upx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(153,153,153,1);

	}
	.glance-shop-cart-total-amt text:nth-child(2){
		font-size:28upx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(102,102,102,1);
		margin-left: 15upx;
	}
	.glance-shop-cart-total-amt text:last-child{
		font-size:30upx;
		font-family:PingFang SC;
		font-weight:500;
		color:rgba(255,94,4,1);
		margin-left: 10upx;
	}
	// 生成订单样式
	.glance-shop-cart-create-order{
		width:189upx;
		height:74upx;
		background:linear-gradient(-90deg,rgba(255,94,4,1),rgba(249,140,45,1));
		border-radius:37upx;
		font-size:36upx;
		font-family:PingFang SC;
		font-weight:400;
		color:rgba(255,255,255,1);
		display: flex;
		justify-content: center;
		align-items: center;
		// margin-right: 24upx;
		margin-left: 23upx;
		}
		.glance-shop-cart-create-order text:first-child{
			margin-right: 10upx;
		}
		
	
	// item 选择样式
	// 不勾选
	.glance-shop-cart-itemunselected-img{
		width: 34upx;
		height: 34upx; 
		border: solid 1px lightgray;
		border-radius: 50%;
		}
	.glance-background-color{
		background:rgba(242,242,242,1);
	}
	.width-height{
		width: 39upx;height: 39upx;
	}

	// 勾选
	.glance-shop-cart-itemselected-img{width: 36upx;height: 36upx;background-size:36upx 36upx;background-repeat:no-repeat;

	
		background-image: url()
		
		}
	.width-height-img{
		width: 41upx;height: 41upx;background-size:41upx 41upx;background-repeat:no-repeat;
		
	}
	.glance-shop-cart-del{
		display: inline-block; width: 18%;height: 212upx; background-color:rgba(255,0,0,0.8);border-radius: 0 20upx 16upx 0;
	}
	// 删除商品背景样式
	.glance-shop-cart-del-img{width: 30px;height: 30px;background-repeat:no-repeat; position: relative; top:33%; transform:translateY(-50%);left:50%;transform:translateX(-50%);
		background-image: url()
		}
	
	// 空购物车背景样式
	.glance-shop-cart-nullcart{width: 120px;height: 120px;position: relative;transform:translateY(-50%);left:50%;transform:translateX(-50%);background-repeat:no-repeat; 
		background-image: url()
		}
</style>
